<template>
  <div class="screen-container">
    <!-- 内容区 -->
    <div class="screen">
      <div class="screen-header">
        <ScreenHeader />
      </div>
      <div class="main">
        <div class="main-lf">
          <ScreenCard title="实时游客统计" height="37%">
            <VisitorWater />
          </ScreenCard>
          <ScreenCard title="男女比例" height="30%" :card-bg="lcImg">
            <SexPercent />
          </ScreenCard>
          <ScreenCard title="年龄比例" height="27%" :card-bg="lbImg">
            <AgePercent />
          </ScreenCard>
        </div>
        <div class="main-ct">
          <div class="main-ct-top">
            <VisitorMap />
          </div>
          <ScreenCard
            class="main-ct-bottom"
            title="未来30天游客量趋势图"
            width="100%"
            height="252px"
            :card-bg="cbImg"
          >
            <Visitor30Line />
          </ScreenCard>
        </div>
        <div class="main-rg">
          <ScreenCard title="热门景区排行" height="37%" :card-bg="rtImg">
            <HotPlaceRankBar />
          </ScreenCard>

          <ScreenCard title="年度游客量对比" height="30%" :card-bg="rcImg">
            <VisitorYearLine />
          </ScreenCard>

          <ScreenCard title="预约渠道数据统计" height="27%" :card-bg="rbImg">
            <AppointChannelPie />
          </ScreenCard>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScreenHeader from './components/ScreenHeader.vue'
import VisitorWater from './components/VisitorWater.vue'
import SexPercent from './components/SexPercent.vue'
import AgePercent from './components/AgePercent.vue'
import Visitor30Line from './components/Visitor30Line.vue'
import VisitorMap from './components/VisitorMap.vue'
import VisitorYearLine from './components/VisitorYearLine.vue'
import HotPlaceRankBar from './components/HotPlaceRankBar.vue'
import AppointChannelPie from './components/AppointChannelPie.vue'

import ScreenCard from './components/ScreenCard.vue'
import lcImg from '@/assets/imgs/screen/dataScreen-main-lc.png'
import lbImg from '@/assets/imgs/screen/dataScreen-main-lb.png'
import cbImg from '@/assets/imgs/screen/dataScreen-main-cb.png'
import rtImg from '@/assets/imgs/screen/dataScreen-main-rt.png'
import rcImg from '@/assets/imgs/screen/dataScreen-main-rc.png'
import rbImg from '@/assets/imgs/screen/dataScreen-main-rb.png'

/**
 * 适配大屏-scale缩放
 * @param w 设计稿宽
 * @param h 设计稿高
 */
const getScale = (w = 1920, h = 1080) => {
  const el = document.documentElement
  const boxEl = document.querySelector('.screen') as HTMLElement
  const clientW = el.clientWidth
  const clientH = el.clientHeight
  let minScale = Math.min(clientW / w, clientH / h)
  boxEl?.setAttribute(
    'style',
    `transform: scale(${minScale}) translate(-50%, -50%)`
  )
}

onMounted(() => {
  getScale()
})
window.onresize = () => {
  getScale()
}
</script>

<style scoped lang="scss">
.screen-container {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/imgs/screen/bg.png') no-repeat;
  background-size: cover;
}

@font-face {
  font-family: YouSheBiaoTiHei;
  src: url('@/assets/fonts/YouSheBiaoTiHei.ttf');
}

.screen {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  // font-family: YouSheBiaoTiHei;
  // 缩放并居中
  transform: scale(1) translate(-50%, -50%);
  transform-origin: left top;

  .screen-header {
    height: 38px;
  }

  .main {
    display: flex;
    justify-content: space-between;
    height: calc(100% - 38px);
    padding: 12px 42px 20px;
    color: #fff;
  }

  .main-lf,
  .main-rg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 394px;
    height: 100%;
  }

  .main-ct {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    margin: 0 40px;

    .main-ct-top {
      flex: 3;
      width: 100%;
      // height: 600px;
    }

    .main-ct-bottom {
      flex: 1;
    }
  }
}
</style>
